<template>
  <div>
    <div class="top">
      <span class="title">全部筛选项：</span>
      <a-space>
        <a-button type="primary" @click="doSearch">搜索</a-button>
        <a-button @click="doReset">重置</a-button>
      </a-space>
    </div>
    <a-row :gutter="16">
      <a-col :span="4">
        <a-input v-model="nameOrIdCard" allowClear placeholder="姓名/身份证号" style="width: 100%" />
      </a-col>
      <a-col :span="4">
        <a-select v-model="eventType" :options="eventTypeLst" allowClear placeholder="请选择事件类型" style="width: 100%" />
      </a-col>
      <a-col :span="4">
        <a-input v-model="currentWorkflow" allowClear placeholder="目前流程" style="width: 100%" />
      </a-col>
      <a-col :span="4">
        <a-date-picker v-model="takeOrdersBeginDate" allowClear placeholder="接单开始时间" style="width: 100%" />
      </a-col>
      <a-col :span="4">
        <a-date-picker v-model="takeOrdersEndDate" allowClear placeholder="接单结束时间" style="width: 100%" />
      </a-col>
      <a-col :span="4">
        <a-input v-model="companyName" allowClear placeholder="用工单位" style="width: 100%" />
      </a-col>
      <a-col :span="4" class="mt16">
        <a-input v-model="takeOrdersUserName" allowClear placeholder="接单客服" style="width: 100%" />
      </a-col>
      <a-col :span="4" class="mt16">
        <a-input v-model="workCity" allowClear placeholder="工作地点" style="width: 100%" />
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    eventTypeLst: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nameOrIdCard: "",
      eventType: undefined,
      currentWorkflow: "",
      takeOrdersBeginDate: null,
      takeOrdersEndDate: null,
      companyName: "",
      takeOrdersUserName: "",
      workCity: ""
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const listSearchParams = localStorage.getItem("listSearchParams");
    if (listSearchParams) {
      const pJson = JSON.parse(listSearchParams);
      this.nameOrIdCard = pJson["nameOrIdCard"] || "";
      this.eventType = pJson["eventType"] || undefined;
      this.currentWorkflow = pJson["currentWorkflow"] || "";
      this.takeOrdersBeginDate = pJson["takeOrdersBeginDate"] || null;
      this.takeOrdersEndDate = pJson["takeOrdersEndDate"] || null;
      this.companyName = pJson["companyName"] || "";
      this.takeOrdersUserName = pJson["takeOrdersUserName"] || "";
      this.workCity = pJson["workCity"] || "";
    }
  },
  methods: {
    doSearch() {
      const params = {
        nameOrIdCard: this.nameOrIdCard,
        eventType: this.eventType,
        currentWorkflow: this.currentWorkflow,
        takeOrdersBeginDate: this.takeOrdersBeginDate,
        takeOrdersEndDate: this.takeOrdersEndDate,
        companyName: this.companyName,
        takeOrdersUserName: this.takeOrdersUserName,
        workCity: this.workCity
      };
      for (const key in params) {
        if (!(params[key] || params[key] === false)) {
          delete params[key];
        }
      }
      if (params["takeOrdersBeginDate"]) {
        params["takeOrdersBeginDate"] = params["takeOrdersBeginDate"].format("YYYY-MM-DD");
      }
      if (params["takeOrdersEndDate"]) {
        params["takeOrdersEndDate"] = params["takeOrdersEndDate"].format("YYYY-MM-DD");
      }
      localStorage.setItem("listSearchParams", JSON.stringify(params));
      this.$emit("search", params);
    },
    doReset() {
      this.nameOrIdCard = "";
      this.eventType = undefined;
      this.currentWorkflow = "";
      this.takeOrdersBeginDate = null;
      this.takeOrdersEndDate = null;
      this.companyName = "";
      this.takeOrdersUserName = "";
      this.workCity = "";
      this.$emit("search", {});
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  .title {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
